MutationObserver - відстежувати зміни в DOM-структурі сторінки

js 27 лют. 2023 р.
MutationObserver - відстежувати зміни в DOM-структурі сторінки

MutationObserver - це інтерфейс JavaScript, який надає спосіб відстежувати зміни, що відбуваються в DOM-структурі сторінки. Цей інтерфейс може бути дуже корисним для динамічних веб-сторінок, де елементи можуть бути створені, змінені або видалені відповідно до дій користувача.

Інтерфейс MutationObserver працює на основі спостереження за DOM-деревом і спрацьовує, коли відбувається зміна в структурі DOM-дерева. Він може відстежувати такі зміни, як додавання нових елементів, видалення існуючих елементів, а також зміну атрибутів або тексту в елементах.

Давайте розглянемо декілька прикладів використання MutationObserver зі зразками коду.

Приклад 1: Відстеження змін в текстовому полі

У цьому прикладі ми будемо відстежувати зміни в текстовому полі та виводити новий текст в консолі при кожній зміні.

// Визначаємо цільовий елемент для спостереження
const target = document.querySelector('#text-field');

// Створюємо екземпляр MutationObserver
const observer = new MutationObserver(mutationsList => {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('Текстове поле було змінено');
      console.log(target.value);
    }
  }
});

// Налаштовуємо спостереження
observer.observe(target, { attributes: true, childList: true, subtree: true });

В цьому коді ми визначаємо цільовий елемент, який будемо відслідковувати, а потім створюємо екземпляр MutationObserver, який буде відстежувати зміни в цьому елементі. Далі ми налаштовуємо спостереження, передаючи список параметрів, які включають в себе attributes, childList та subtree, які дозволяють відстежувати зміни в атрибутах, дочірніх елементах

Приклад 2: Відстеження змін в списку

// Визначаємо цільовий елемент для спостереження
const target = document.querySelector('#list');

// Створюємо екземпляр MutationObserver
const observer = new MutationObserver(mutationsList => {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('Список було змінено');
      console.log(target.children.length);
    }
  }
});

// Налаштовуємо спостереження
observer.observe(target, { childList: true });

В цьому прикладі ми відстежуємо зміни в списку, використовуючи метод observe() зі списком параметрів { childList: true }. При кожній зміні ми виводимо повідомлення у консоль та кількість елементів у списку.

Приклад 3: Відстеження змін в класі

У цьому прикладі ми будемо відстежувати зміни в класі елемента та виводити нові та старі значення класу при кожній зміні.

// Визначаємо цільовий елемент для спостереження
const target = document.querySelector('#element');

// Створюємо екземпляр MutationObserver
const observer = new MutationObserver(mutationsList => {
  for (let mutation of mutationsList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      console.log(`Клас елемента було змінено з ${mutation.oldValue} на ${target.className}`);
    }
  }
});

// Налаштовуємо спостереження
observer.observe(target, { attributes: true, attributeOldValue: true, attributeFilter: ['class'] });

В цьому прикладі ми відстежуємо зміни в класі елемента, використовуючи метод observe() зі списком параметрів { attributes: true, attributeOldValue: true, attributeFilter: ['class'] }. При кожній зміні ми виводимо повідомлення у консоль зі старим та новим значеннями класу.

Ці приклади демонструють, як можна використовувати MutationObserver у JavaScript для відстеження змін в DOM-структурі.Використовуючи MutationObserver, ви можете більш точно реагувати на зміни у вашому додатку та виконувати необхідні дії при кожній зміні. Це може бути корисно при розробці додатків, які взаємодіють з користувачем та мають динамічний контент.

Висновок

MutationObserver є потужним інструментом для відстеження змін в DOM-структурі. Ви можете використовувати його для відстеження змін в різних елементах, таких як списки, класи, текстові поля та багато інших. Це може бути корисно при розробці додатків, які взаємодіють з користувачем та мають динамічний контент. Наведені вище приклади демонструють, як використовувати MutationObserver у JavaScript, і можуть бути використані як початкові точки для розробки ваших власних рішень.

Telegram чат